<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-09 16:01:12
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-27 17:46:08
 * @FilePath: /shortRent-ui/src/views/system/credit/components/addPackage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog title="新增征信包" :visible.sync="visible" @close="close">
    <div>
      <el-form :model="formData" ref="form" :rules="rules" label-width="100px" :inline="false" size="normal">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="征信包名称:" prop="name">
              <el-input v-model="formData.name" placeholder="请输入征信包名称" maxlength="20" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="单价:" prop="price">
              <el-input v-model="formData.price" placeholder="请输入征信包查询单价" maxlength="10">
                <template slot="append">元/次</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="征信包类型:" prop="type">
              <el-select v-model="formData.type" placeholder="请选择征信包类型">
                <el-option label="企业" :value="1"></el-option>
                <el-option label="个人" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="介绍:" prop="remark">
              <el-input type="textarea" placeholder="请输入内容" v-model="formData.remark" maxlength="200" show-word-limit>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 个人 -->
        <el-form-item label="选择查询项:" prop="selectQueryIds">
          <template v-if="formData.type === 2">
            <template>
              <div class="subTitle">个人-基础核验</div>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-checkbox-group v-model="currentList1">
                    <el-checkbox v-for="item in list1" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </template>

            <template>
              <div class="subTitle">个人-企业背景</div>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-checkbox-group v-model="currentList2">
                    <el-checkbox v-for="item in list2" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </template>

            <template>
              <div class="subTitle">个人-反欺诈</div>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-checkbox-group v-model="currentList3">
                    <el-checkbox v-for="item in list3" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </template>

            <template>
              <div class="subTitle">个人-收入能力</div>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-checkbox-group v-model="currentList4">
                    <el-checkbox v-for="item in list4" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </template>

          </template>
          <!-- 企业 -->
          <template v-if="formData.type === 1">
            <template>
              <div class="subTitle">企业-基础核验</div>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-checkbox-group v-model="currentCompanyList1">
                    <el-checkbox v-for="item in companyList1" :label="item.id" :key="item.id">{{ item.name
                    }}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </template>
            <template>
              <div class="subTitle">企业-风险审查</div>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-checkbox-group v-model="currentCompanyList2">
                    <el-checkbox v-for="item in companyList2" :label="item.id" :key="item.id">{{ item.name
                    }}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </template>
          </template>
        </el-form-item>
      </el-form>

    </div>

    <span slot="footer">
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>

    </span>
  </el-dialog>
</template>
<script>
import * as creditApi from '@/api/credit/credit';
export default {
  data() {
    return {
      type: 0, //页面类型 0.新增 1.编辑
      id: '',
      visible: false,
      interfaceGroupNameMap: {},//分类查询项
      allList: [],//所有的查询项
      //个人-基础核验
      currentList1: [],
      list1: [],
      // 个人-企业背景
      currentList2: [],
      list2: [],
      // 个人-反欺诈
      currentList3: [],
      list3: [],
      // 个人-收入能力
      currentList4: [],
      list4: [],
      // 企业-基础核验
      currentCompanyList1: [],
      companyList1: [],
      // 企业-风险审查
      currentCompanyList2: [],
      companyList2: [],
      formData: {
        name: '',//征信查询包名称
        price: '',//征信包单价
        type: '', //征信包类型 1= 企业, 2= 个人
        remark: '',//介绍
        selectQueryIds: [],//查询项ID集合
      },
      rules: {
        name: [
          { required: true, message: '请完善征信包名称', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请完善征信包单价', trigger: 'blur' },
          {
            pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/,
            message: "单价金额格式不正确,请输入0.01~999999999.99的值",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: '请选择征信包类型', trigger: 'change' },
        ],
        remark: [
          { required: true, message: '请输入征信包介绍', trigger: 'blur' },
        ],
        selectQueryIds: [
          { type: 'array', required: true, message: '请至少选择一项查询项', trigger: 'blur' },
        ]
      }
    }
  },
  created() {
    // 获取所有的查询项
    this.getCreditOption();
    console.log('我是vue实例>>', this);
  },
  methods: {
    //获取查询项
    getCreditOption() {
      creditApi.creditQueryOption().then(res => {
        this.interfaceGroupNameMap = res.data.interfaceGroupNameMap;
        this.allList = res.data.list;
        this.list1 = this.interfaceGroupNameMap['个人-基础核验'];
        this.list2 = this.interfaceGroupNameMap['个人-企业背景'];
        this.list3 = this.interfaceGroupNameMap['个人-反欺诈'];
        this.list4 = this.interfaceGroupNameMap['个人-收入能力'];
        this.companyList1 = this.interfaceGroupNameMap['企业-基础核验'];
        this.companyList2 = this.interfaceGroupNameMap['企业-风险审查'];
      })
    },
    // 校验
    validate() {
      let selectedIds = [];
      if (this.formData.type == 2) {//个人
        selectedIds = [...this.currentList1, ...this.currentList2, ...this.currentList3, ...this.currentList4];
      } else if (this.formData.type == 1) {//企业
        selectedIds = [...this.currentCompanyList1, ...this.currentCompanyList2];
      }
      this.formData.selectQueryIds = selectedIds;
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          resolve(valid)
        });
      })
    },
    // 确定按钮
    async onSubmit() {
      const valid = await this.validate();
      if (valid) {
        if (this.type == 0) {//新增
          this.$confirm('确定添加征信包吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            creditApi.addCredit(this.formData).then(res => {
              if (res.code == 200) {
                this.$emit('success');
                this.close();
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
              }
            })

          })
        } else if (this.type == 1) {//编辑
          this.$confirm('确定修改吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            let data = JSON.stringify(this.formData);
            creditApi.editCredit(this.id, data).then(res => {
              if (res.code == 200) {
                this.$emit('success');
                this.close();
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
              }
            })

          })
        }

      }
    },

    show(type, id) {
      this.type = type;
      this.visible = true;
      if (type == 1) {//编辑=>匹配筛选项
        // 防止上次的数据重复渲染,先清空查询项
        this.currentList1 = [];
        this.currentList2 = [];
        this.currentList3 = [];
        this.currentList4 = [];
        this.currentCompanyList1 = [];
        this.currentCompanyList2 = [];
        this.id = id;
        this.getDetailWithMatchingQueryOption();
      } else {//新增
        // 防止缓存数据二次渲染清空form表单, 在使用$ref控制组件时,需在dom渲染完成后使用, 所以添加nextTick,来延时渲染回调
        this.$nextTick(() => {
          this.$refs.form.resetFields();
        })

      }
    },
    //获取查询包详情并匹配已选查询项
    getDetailWithMatchingQueryOption() {
      creditApi.creditDetail(this.id).then(res => {
        this.formData = res.data;
        if (this.formData.selectQueryIds.length > 0) {
          this.formData.selectQueryIds.forEach(id => {
            if (this.formData.type == 2) {//个人
              if (id >= 1 && id <= 5) {//个-人基础核验
                this.currentList1.push(id);
              } else if (id == 6) {//个人-企业背景
                this.currentList2.push(id);
              } else if (id >= 7 && id <= 11) {//个人-反欺诈
                this.currentList3.push(id);
              } else if (id == 12) {//个人-收入能力
                this.currentList4.push(id);
              }
            } else if (this.formData.type == 1) {//企业
              if (id == 13) {//企业-基础核验
                this.currentCompanyList1.push(id);
              } else if (id >= 14 && id <= 22) {//企业-风险审查
                this.currentCompanyList2.push(id);
              }
            }


          })
        }
      })
    },
    close() {
      this.visible = false;
    }
  },
}
</script>
<style lang="scss" scoped>
.subTitle {
  color: #333;
  font-size: 15px;
  font-weight: bold;
  margin: 15px 0;

  &::before {
    position: relative;
    top: 4px;
    display: inline-block;
    margin-right: 5px;
    content: '';
    width: 5px;
    height: 20px;
    background: #5c79e9;
  }
}
</style>